<template>
	<el-container style="min-height: 100vh;height: 100%">
		<el-aside width="240px" style="overflow: hidden;">
			<el-row class="tac" style="height:100%">
				<el-col :span="24" style="background: linear-gradient(#e5f2ff, #fff);">
					<div class="mb-2" style="display: flex; align-items: center;height: 60px;padding-left: 20px;">
						<img src="@/assets/logo.png" alt="Logo" style="height: 40px; margin-right: 10px;">
						<span style="font-size: 20px; font-weight: bold;">{{$t('project_title')}}</span>
					</div>
					<el-menu :default-active="activeMenuPath" class="el-menu-vertical-demo" router @open="handleOpen"
						@close="handleClose" style="height: 100%">
						<el-menu-item class="tall-item" index="/purches">
							<el-icon>
								<CirclePlus />
							</el-icon>
							<span>{{$t('master_menu.menu1')}}</span>
						</el-menu-item>
						<el-menu-item index="/my_phone">
							<el-icon>
								<Iphone />
							</el-icon>
							<span>{{$t('master_menu.menu2')}}</span>
						</el-menu-item>
						<el-menu-item index="/wallet">
							<el-icon>
								<Wallet />
							</el-icon>
							<span>{{$t('master_menu.menu3')}}</span>
						</el-menu-item>
						<el-menu-item index="/cloud_disk">
							<el-icon>
								<UploadFilled />
							</el-icon>
							<span>{{$t('master_menu.menu4')}}</span>
						</el-menu-item>
					<!-- 	<el-menu-item index="/automated_operation">
							<span class="iconfont icon-zidongjhua icon24px" style="margin-right: 8px;"></span>
							<span>{{$t('master_menu.menu5')}}</span>
						</el-menu-item> -->
						<el-menu-item index="/Agency_module/Agency_Index">
							<span class="iconfont icon-dailiguanligongju icon24px" style="margin-right: 8px;"></span>
							<span>{{$t('master_menu.menu6')}}</span>
						</el-menu-item>
					</el-menu>
				</el-col>
			</el-row>
		</el-aside>
		<el-container style="height: 100%">
			<el-header height="60px" class="header">
				<div class="roll_poster_div" v-if="$store.state.Userdata.usedCoupon==0" @click="$store.commit('setForceShowFreePhoneDialog', true)">
					<img src="@/assets/try_out_poster.png" alt="" width="220px" height="40px" />
				</div>
				<div class="header-top-iconfuns">
					<!-- <el-badge :value="5" :max="99">
						<el-icon :size="25" style="cursor: pointer;">
							<Bell />
						</el-icon>
					</el-badge> -->
					<el-popover class="box-item" trigger="click" placement="bottom-end" popper-style="padding:0;">
						<template #reference>
							<div><i class="iconfont icon24px icon-translate"></i></div>
						</template>
						<template #default>
							<div class="fun_options">
								<p @click="switchLanguage('zh-CN')">中文</p>
								<p @click="switchLanguage('en-US')">English</p>
							</div>
						</template>
					</el-popover>
				</div>
				<div style="display: flex; align-items: center; gap: 20px;">
					<!-- 已登录状态显示用户信息和通知 -->
					<template v-if="$store.state.isLogin">
						<el-dropdown>
							<div style="display: flex; align-items: center; cursor: pointer;">
								<el-avatar :size="25"
									src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
								<span style="margin-left: 8px;color: #333;">{{ $store.state.Userdata.username }}</span>
								<el-icon style="margin-left: 4px;">
									<ArrowDown />
								</el-icon>
							</div>
							<template #dropdown>
								<el-dropdown-menu>
									<!--                  <el-dropdown-item>个人中心</el-dropdown-item>-->
									<el-dropdown-item
										@click="handleLogout">{{$t('button.login_out')}}</el-dropdown-item>
									<!-- <el-dropdown-item divided>账号设置</el-dropdown-item> -->
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>

					<!-- 未登录状态显示登录/注册按钮 -->
					<template v-else>
						<el-button type="text" @click="goToLogin">{{$t('button.login')}}</el-button>|
						<el-button type="text" @click="goToRegister">{{$t('button.register')}}</el-button>
					</template>
				</div>
			</el-header>
			<el-main class="main_box">
				<router-view class="main-content" />
				<div class="beian_box">
					<p><a href="https://beian.miit.gov.cn/#/Integrated/index" rel="noreferrer"
							target="_blank">湘ICP备2025132467号-1</a></p>
					<p>
						<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/jgwab.png" alt="" />
						<a href="https://beian.mps.gov.cn/#/query/webSearch?code=43010502001860" rel="noreferrer"
							target="_blank">湘公网安备43010502001860号</a>
					</p>
				</div>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import request from "@/utils";
	// import store from '@/store' // 直接导入 store 实例
	import {
		CirclePlus,
		// Setting,
		Iphone,
		Wallet,
		UploadFilled
	} from '@element-plus/icons-vue'
	import {
		ElMessage
	} from 'element-plus';
	export default {
		name: 'MainLayout',
		inject: ['openLogin_dialog'],
		data() {
			return {
				username: 'anonymous',
				currentLang: this.$i18n.locale
			}
		},
		created() {
			this.checkAuthAndFetchProfile();
		},
		// 新增计算属性：动态确定激活的菜单路径
		computed: {
			activeMenuPath() {
				const currentPath = this.$route.path;
				// 检查当前路径是否以 /purches 开头
				if (currentPath.startsWith('/purches')) {
					return '/purches';
				}
				// 默认使用路由 meta 中的 activeMenu 或当前路径
				return this.$route.meta.activeMenu || currentPath;
			}
		},
		methods: {
			//更换语言
			switchLanguage(lang) {
				this.$i18n.locale = lang
				this.currentLang = lang
				localStorage.setItem('lang', lang)
				window.location.reload()
			},
			async checkAuthAndFetchProfile() {
				const token = localStorage.getItem('token');
				// useStore().state.isLogin = !!token; // 根据token存在与否设置登录状态

				if (token) {
					try {
						const response = await request.get('/user/profile')
						if (response.data.code === 200) {
							this.username = response.data.data.username;
							this.$store.commit('localStorage_userdata', response.data.data)
						} else {
							this.clearAuthData();
						}
					} catch (error) {
						this.clearAuthData();
					}
				}
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath)
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath)
			},
			clearAuthData() {
				localStorage.removeItem('token');
				localStorage.removeItem('userID');
				this.$store.commit('no_login')
				this.username = 'anonymous';
			},
			handleLogout() {
				localStorage.removeItem('token');
				localStorage.removeItem('userID');
				this.$store.commit('no_login')
				this.username = 'anonymous';
				ElMessage.success('已退出登录');
				this.openLogin_dialog()
			},
			goToLogin() {
				this.openLogin_dialog()
			},
			goToRegister() {
				this.$router.push('/register');
			}
		}
	}
</script>

<style lang="less" scoped>
	.beian_box {
		width: calc(100% - 40px);
		// position: absolute;
		// bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
		color: #007aff;
		margin-top: 10px;

		img {
			width: 20px;
			height: 20px;
		}

		p {
			display: flex;
			align-items: center;
		}

		a {
			color: #007aff;
		}

		a:hover {
			color: #333;
		}
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20px;
		background: url('@/assets/head-bg-Dw3SYgQf.png')no-repeat;
	}

	.main_box {
		overflow-y: auto;
		flex: 1;
		padding: 10px;
		background-color: #eff2f4;
		display: flex;
		flex-direction: column;

		.main-content {
			flex: 1;
		}
	}

	.content-container {
		background-color: #fff;
		padding: 10px 15px;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
		border-radius: 5px;
	}

	.el-menu-item {
		padding: 30px !important;
		font-size: 14px;
		color: #333;
	}

	/* 保持原有样式不变 */
	.el-menu-vertical-demo {
		width: 220px;
		height: 100vh;
		border-right: none;
		background-color: initial;
	}

	.el-menu-vertical-demo .el-menu-item,
	.el-menu-vertical-demo .el-sub-menu__title {
		height: 60px;
		line-height: 60px;
	}

	/deep/ .el-menu-vertical-demo .el-menu-item:hover {
		background-color: #dfedfe !important;
	}

	/deep/ .el-menu-vertical-demo .el-menu-item.is-active {
		background-color: #ddeefe !important;
		font-weight: 900;
		color: #409eff;
	}

	.el-menu-vertical-demo .el-icon {
		font-size: 18px;
		margin-right: 8px;
	}

	/* 登录/注册按钮样式调整 */
	.el-button--text {
		color: #333;
		padding: 0 10px;
	}

	.el-button--text:hover {
		color: #409EFF;
	}

	.roll_poster_div {
		margin-right: 20px;

		img {
			cursor: pointer;
		}
	}

	.header-top-iconfuns {
		color: #666;
		margin-right: 30px;
		display: flex;
		gap: 20px;

		div {
			cursor: pointer;
		}

		div:hover {
			color: #409EFF;
		}
	}
</style>